ion-app.app-root.ios {
  .button-ios {
    min-height: $button-ios-height;
  }

  ion-searchbar.searchbar-ios .button-ios {
      min-height: auto;
  }

  // Light buttons color.
  .button-ios-light {
    color: color($colors, primary, base);
  }

  .col[align-self-stretch] .card-ios {
    height: calc(100% - #{($card-ios-margin-end + $card-ios-margin-start)});
  }

  .bar-buttons core-context-menu .button-clear-ios {
    color: $toolbar-ios-button-color;
  }

  .item-ios ion-spinner[item-start],
  .item-ios ion-spinner[item-end] {
    @include margin($item-ios-padding-icon-top, null, $item-ios-padding-icon-bottom, 0);
  }

  .item-ios ion-icon[item-start] + .item-inner,
  .item-ios ion-icon[item-start] + .item-input,
  .item-ios img[item-start] + .item-inner,
  .item-ios img[item-start] + .item-input {
    @include margin-horizontal($item-ios-padding-start, null);
  }

  .item-ios ion-avatar[item-start] + .item-inner,
  .item-ios ion-avatar[item-start] + .item-input {
    @include margin-horizontal(0, null);
  }

  @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
    .core-#{$color-name}-card {
      @extend .card-ios ;
      @extend .card-content-ios;

      @include darkmode() {
        background-color: $core-dark-item-bg-color;
      }

      &[icon-start] {
        @include safe-area-padding(null, null, null, $card-ios-padding-left * 2 + 20);

        ion-icon {
          @include safe-area-position(null, null, null, $card-ios-padding-left);
        }
      }
    }
  }

  .core-avoid-header ion-content {
      top: $navbar-ios-height;
      height: calc(100% - #{($navbar-ios-height)});
  }

  &.platform-cordova .core-avoid-header ion-content.statusbar-padding,
  &.platform-cordova .core-avoid-header .menu-inner > ion-content {
      height: calc(100% - #{($navbar-ios-height + $cordova-ios-statusbar-padding)});
      height: calc(100% - #{($navbar-ios-height)} - constant(safe-area-inset-top));
      height: calc(100% - #{($navbar-ios-height)} - env(safe-area-inset-top));

      top: calc(#{$navbar-ios-height + $cordova-ios-statusbar-padding});
      top: calc(#{$navbar-ios-height} + constant(safe-area-inset-top));
      top: calc(#{$navbar-ios-height} + env(safe-area-inset-top));
  }

  &.platform-cordova .core-avoid-header .core-avoid-header .menu-inner > ion-content,
  core-tab core-split-view .core-avoid-header .menu-inner > ion-content {
      top: 0;
      height: 100%;
  }

  // Different levels of padding.
  @for $i from 0 through 15 {
    .core-padding-#{$i} {
      @include padding(null, null, null, 15px * $i + $item-ios-padding-start);
    }
  }

  .radio-ios .radio-icon {
    @include position(0, null, null, 0);
    @include margin(0);
    @include border-radius($radio-md-icon-border-radius);

    position: relative;
    display: block;

    width: $checkbox-ios-icon-size;
    height: $checkbox-ios-icon-size;

    border-width: $checkbox-ios-icon-border-width;
    border-style: $checkbox-ios-icon-border-style;
    border-color: $checkbox-ios-icon-border-color-off;
    background-color: $checkbox-ios-background-color-off;
  }


  .action-sheet-ios {
    .action-sheet-title {
      font-size: 2rem;
    }
    // File Uploader
    // In iOS the input is 1 level higher, so the styles are different.
    input.core-fileuploader-file-handler-input {
      position: absolute;
      @include position(null, 0, null, 0);
      min-width: 100%;
      min-height: $action-sheet-ios-button-min-height;
      opacity: 0;
      outline: none;
      z-index: 100;
      cursor: pointer;
    }
  }
}
